<template>
  <div class="account-right f-cb">
    <div class="pb115 f-cb" v-if="level.hasOwnProperty('HK') && stockInfo.detail">
      <div class="account-right-top f-cb">
        <h2>
          <!-- 腾讯控股 00700.HK -->
          <div class="title">
            <p class="titleName">
              {{ stockInfo.detail.name }}
            </p>
            <p>
              {{ stockInfo.detail.symbol }}.{{
                stockInfo.detail.market | Market
              }}
            </p>
          </div>
          <!-- 行情中心无搜索功能 -->
          <div v-if="SearchShowIs == false && isSearch == false" class="fr">
            <span class="close fr" @click="CloseRightPage"></span>
            <span class="interquotation fr" @click="interquotation"></span>
          </div>
          <img
            :src="require('@/assets/img/icon_gh.png')"
            alt=""
            class="icon"
            @click="SearchShow = SearchShow ? false : true"
            v-if="SearchShowIs == true"
          />
          <div class="search f-cb" v-if="SearchShow">
            <el-autocomplete
              v-model="valur"
              :popper-append-to-body="false"
              :fetch-suggestions="querySearch"
              :placeholder="$t('m.inputStock')"
              :trigger-on-focus="false"
              @select="handleSelect"
              clearable
              ref="elautocomplete"
            >
              <template slot-scope="{ item }">
                <div class="name">{{ item.name }}</div>
                <span class="addr"
                  >{{ item.symbol }}({{ item.market | Market }})</span
                >
                <!-- <div class="name">
                  {{ item.name }} {{ item.symbol }}.{{ item.market }}
                </div>
                <div class="about-infis">
                  <p class="red">
                    <span class="h1">557.00</span>
                    <span class="smallfonts">+0.340</span>
                    <span class="smallfonts">+16.50%</span>
                  </p>
                </div> -->
              </template>
            </el-autocomplete>
            <input
              type="button"
              @click="SearchShow = SearchShow ? false : true"
            />
          </div>
        </h2>
        <div class="f-cb about-infis">
          <p
            class="fl"
            :class="
              Number(qutationData.latestPrice) > Number(stockInfo.detail.close)
                ? 'red'
                : Number(qutationData.latestPrice) ==
                  Number(stockInfo.detail.close)
                ? ''
                : 'green'
            "
          >
            <span class="hs1">{{
              Number(qutationData.latestPrice).toFixed(
                stockInfo.detail.precision
              )
            }}</span>
            <!-- 涨跌额 -->
            <span class="smallfonts">
              {{ Number(qutationData.gain) > 0 ? "+" : ""
              }}{{
                ((qutationData.chg * 100) / 100).toFixed(
                  stockInfo.detail.precision
                )
              }}</span
            >
            <span class="smallfonts"
              >{{ qutationData.gain > 0 ? "+" : ""
              }}{{ (qutationData.gain * 100).toFixed(2) }}%</span
            >
          </p>
          <!-- 行情类型 -->
          <div
            class="fr Icon"
            :class="stockInfo.detail.securityType == 2 ? 'iconDapan' : ''"
          >
            <span class="support">
              <img
                :src="require('@/assets/img/icon_zdx.png')"
                :title="$t('account.account_right.56hpz2m00cw0')"
                v-if="stockInfo.detail.isSupportFinance == 1"
              />
            </span>
            <span class="support">
              <img
                :src="require('@/assets/img/icon_zkx.png')"
                :title="$t('account.account_right.56hpz2m01b40')"
                v-if="stockInfo.detail.isSupportShort == 1"
              />
            </span>
            <!-- 基础行情等级 -->
            <span
              class="quotation"
              v-if="stockInfo.detail.market == 'HKEX'"
            >
              <el-tooltip class="item" effect="dark" placement="bottom-start">
                <p class="tip_i" slot="content" v-if="level.HK.level == 0">
                  {{ $t("account.account_right.57kmm4mqi7c0")
                  }}<span>{{ $t("account.account_right.57cevwecm1k0") }}</span
                  ><span
                    class="blue_i"
                    @click="toMarketMall(0)"
                    >{{ $t("account.account_right.57ceceqcm5k0") }}</span
                  >
                </p>
                <p class="tip_i" slot="content" v-if="level.HK.level == 2">
                  {{ $t("account.account_right.57kmm4mqkmk0")
                  }}<span>{{
                    `${$t("account.account_right.57vejhvwe1k0")}${
                      levelObj.restDay
                    }${$t("m.Day")},${$t("account.account_right.57cevwecm1k0")}`
                  }}</span
                  ><span
                    class="blue_i"
                    @click="toMarketMall(0)"
                    >{{ $t("account.account_right.57ceceqcm5k0") }}</span
                  >
                </p>
                <p class="tip_i" slot="content" v-if="level.HK.level == -1">
                  {{ $t("account.account_right.57kmm4mqwsk0")
                  }}<span>{{ $t("account.account_right.57cevwecm1k0") }}</span
                  ><span
                    class="blue_i"
                    @click="toMarketMall(0)"
                    >{{ $t("account.account_right.57ceceqcm5k0") }}</span
                  >
                </p>
                <img
                  :src="require('@/assets/img/icon_yshqd.png')"
                  v-if="level.HK.level == -1"
                />
                <img
                  :src="require('@/assets/img/icon_v0x.png')"
                  v-else-if="level.HK.level == 0"
                />
                <img
                  :src="require('@/assets/img/icon_v1d.png')"
                  v-else-if="level.HK.level == 1"
                />
                <img
                  :src="require('@/assets/img/icon_v2d.png')"
                  :title="
                    $t('m.hkStock') + $t('account.account_right.56hpz5mqx80')
                  "
                  v-else
                />
              </el-tooltip>
            </span>
            <span
              class="quotation"
              v-else-if="
                stockInfo.detail.market == 'SSE' ||
                stockInfo.detail.market == 'SZSE'
              "
            >
              <el-tooltip class="item" effect="dark" placement="bottom-start">
                <p class="tip_i" slot="content" v-if="level.CN.level == 1">
                  {{ $t("account.account_right.57kmm4mql380")
                  }}<span>{{ $t("account.account_right.57cevwecm1k0") }}</span
                  ><span
                    class="blue_i"
                    @click="toMarketMall(2)"
                    >{{ $t("account.account_right.57ceceqcm5k0") }}</span
                  >
                </p>
                <p class="tip_i" slot="content" v-if="level.CN.level == 2">
                  {{ $t("account.account_right.57kmm4mqleo0")
                  }}<span>{{
                    `${$t("account.account_right.57vejhvwe1k0")}${
                      levelObj.restDay
                    }${$t("m.Day")},${$t("account.account_right.57cevwecm1k0")}`
                  }}</span
                  ><span
                    class="blue_i"
                    @click="toMarketMall(2)"
                    >{{ $t("account.account_right.57ceceqcm5k0") }}</span
                  >
                </p>
                <p class="tip_i" slot="content" v-if="level.CN.level == -1">
                  {{ $t("account.account_right.57kmm4mqwsk0")
                  }}<span>{{ $t("account.account_right.57cevwecm1k0") }}</span
                  ><span
                    class="blue_i"
                    @click="toMarketMall(2)"
                    >{{ $t("account.account_right.57ceceqcm5k0") }}</span
                  >
                </p>
                <img
                  :src="require('@/assets/img/icon_yshqd.png')"
                  v-if="level.CN.level == -1"
                />
                <img
                  :src="require('@/assets/img/icon_v0x.png')"
                  v-else-if="level.CN.level == 0"
                />
                <img
                  :src="require('@/assets/img/icon_v1d.png')"
                  v-else-if="level.CN.level == 1"
                />
                <img
                  :src="require('@/assets/img/icon_v2d.png')"
                  v-else
                />
              </el-tooltip>
            </span>
            <span
              class="quotation"
              v-else-if="stockInfo.detail.market == 'US'"
            >
              <el-tooltip class="item" effect="dark" placement="bottom-start">
                <p class="tip_i" slot="content" v-if="level.US.level == 0">
                  {{ $t("account.account_right.57kmm4mqlq00")
                  }}<span>{{ $t("account.account_right.57cevwecm1k0") }}</span
                  ><span
                    class="blue_i"
                    @click="toMarketMall(1)"
                    >{{ $t("account.account_right.57ceceqcm5k0") }}</span
                  >
                </p>
                <p class="tip_i" slot="content" v-if="level.US.level == 1">
                  {{ $t("account.account_right.57kmm4mqm1k0")
                  }}<span>{{
                    `${$t("account.account_right.57vejhvwe1k0")}${
                      levelObj.restDay
                    }${$t("m.Day")},${$t("account.account_right.57cevwecm1k0")}`
                  }}</span
                  ><span
                    class="blue_i"
                    @click="toMarketMall(1)"
                    >{{ $t("account.account_right.57ceceqcm5k0") }}</span
                  >
                </p>
                <p class="tip_i" slot="content" v-if="level.US.level == -1">
                  {{ $t("account.account_right.57kmm4mqwsk0")
                  }}<span>{{ $t("account.account_right.57cevwecm1k0") }}</span
                  ><span
                    class="blue_i"
                    @click="toMarketMall(1)"
                    >{{ $t("account.account_right.57ceceqcm5k0") }}</span
                  >
                </p>
                <img
                  :src="require('@/assets/img/icon_yshqd.png')"
                  v-if="level.US.level == -1"
                />
                <img
                  :src="require('@/assets/img/icon_v0x.png')"
                  v-else-if="level.US.level == 0"
                />
                <img
                  :src="require('@/assets/img/icon_v1d.png')"
                  v-else-if="level.US.level == 1"
                />
                <img
                  :src="require('@/assets/img/icon_v2d.png')"
                  v-else
                />
              </el-tooltip>
            </span>
            <span class="country">
              <img
                :src="require('@/assets/img/icon_ggxx.png')"
                :title="$t('account.account_right.56hpz2m01v40')"
                v-if="stockInfo.detail.market == 'HKEX'"
              />
              <img
                :src="require('@/assets/img/icon_mgdd.png')"
                :title="$t('account.account_right.56hpz2m023o0')"
                v-else-if="stockInfo.detail.market == 'US'"
              />
              <img
                :src="require('@/assets/img/icon_hsdd.png')"
                :title="$t('account.account_right.56hpz2m02d00')"
                v-else-if="
                  stockInfo.detail.market == 'SZSE' && stockInfo.detail.tag != 0
                "
              />
              <img
                :src="require('@/assets/img/icon_hsdd.png')"
                :title="$t('account.account_right.56hpz2m02lc0')"
                v-else-if="
                  stockInfo.detail.market == 'SSE' && stockInfo.detail.tag != 0
                "
              />
            </span>
            <span>
              <img
                :src="require('@/assets/img/icon_zgdd.png')"
                :title="$t('account.account_right.56hpz2m02ts0')"
                v-show="
                  stockInfo.detail.market == 'SZSE' ||
                  stockInfo.detail.market == 'SSE'
                "
              />
            </span>
          </div>
        </div>
        <div class="tradeTime" v-if="stockInfo.detail.market != 'US'">
          <span v-if="qutationData.latestTime"
            >{{ stockInfo.market.statusStr }} {{ qutationData.latestTime | date
            }}{{ $t("m.Beijing_time") }}</span
          >
        </div>
        <!-- 美东时间 -->
        <div class="tradeTime" v-else>
          <span v-if="qutationData.latestTime"
            >{{ stockInfo.market.statusStr }}
            {{ qutationData.latestTime | toNewYork }}
            {{ $t("m.US_East_Savings") }}</span
          >
        </div>
      </div>
      <el-tabs v-model="activeName" @tab-click="handleClick" class="listChange">
        <el-tab-pane
          :label="$t('account.account_right.56hpz2m03380')"
          name="first"
        >
          <!-- 报价 -->
          <Offer :offerData="offerData" :quotation="quotation"></Offer>
        </el-tab-pane>
        <el-tab-pane
          v-if="stockInfo.detail.securityType == 1"
          :label="$t('account.account_right.56hpz2m03bo0')"
          name="second"
        >
          <!-- 资金 -->
          <Capital></Capital>
        </el-tab-pane>
        <el-tab-pane
          :label="$t('account.account_right.56hpz2m03o40')"
          name="third"
        >
          <!-- 评论 -->
          <comment ref="commentList"></comment>
        </el-tab-pane>
      </el-tabs>
      <div style="height: 70px"></div>
    </div>
    <div
      class="account-trade f-cb"
      v-if="stockInfo.market && stockInfo.detail.securityType == 1"
    >
      <div class="button">
        <!-- 未开户或非深港通的不允许交易 -->
        <div
          class="fix"
          v-if="
            IsOpen == 0 ||
            (stockInfo.detail.tag == 0 &&
              (stockInfo.detail.market == 'SSE' ||
                stockInfo.detail.market == 'SZSE'))
          "
        >
          <button class="bt_gray">
            {{ $t("account.account_right.56hpz2m03x80") }}
          </button>
          <button class="bt_gray">
            {{ $t("account.account_right.56hpz2m04540") }}
          </button>
        </div>
        <div class="fix" v-else>
          <button class="buy" @click="drawer_right('', 1)">
            {{ $t("account.account_right.56hpz2m03x80") }}
          </button>
          <button class="sell" @click="drawer_right('', 2)">
            {{ $t("account.account_right.56hpz2m04540") }}
          </button>
        </div>
      </div>
    </div>

    <el-drawer
      :visible.sync="drawer"
      :direction="direction"
      custom-class="drawer"
      size="380px"
      :close-on-press-escape="false"
      :wrapperClosable="false"
      :show-close="false"
      v-if="drawer"
      :before-close="beforeClose"
    >
      <BusinessDialog
        :tradeDirection="tradeDirection"
        @hideTrade="hideTrade"
        @reset="reset"
      ></BusinessDialog>
    </el-drawer>
    <!-- 行情商城 -->
    <MarketMall ref="mall" :show="mallShow" @close="ClosePopup"></MarketMall>
  </div>
</template>
<script>
import {get_details} from '@/assets/js/API/market.js';
import { get_search, post_history, get_my_quotation } from "@/assets/js/API/user.js";
import Offer from "@/components/account/right/Offer.vue";
import Capital from "@/components/account/right/Capital.vue";
import BusinessDialog from "@/components/account/right/BusinessDialog";
import MarketMall from "@/components/account_dialog/market_mall.vue";
import Comment from "@/components/account/right/Comment.vue";
import dayjs from "dayjs";
import * as timezone from "dayjs/plugin/timezone"; // import plugin
export default {
  props: ["SearchShowIs"],
  components: {
    Offer,
    Capital,
    Comment,
    BusinessDialog,
    MarketMall,
  },
  data() {
    return {
      quotation: 0, // 0:l0 1:l1 2:l2
      support: 0, //0：支持融资 1：支持融券 2：融资融券
      country: 0, //0:港交所 1：纳斯达 3 深交所中国 4：户港通
      valur: "",
      SearchShow: false,
      activeName: "first",
      offerData: {},
      drawer: false,
      direction: "rtl",
      childList: {},
      Details_data: this.$store.state.index.StockData,
      list: { id: null, isFinance: 0 },
      tradeDirection: 0,
      isSearch: false, // 行情中心无搜索功能
      IsOpen: 0,
      qutationData: {
        latestPrice: "",
        gain: "",
        chg: "",
      }, // 股票行情数据
      setSymbolTime: null, // 股票涨跌定时器
      marketType: 2, // 市场类型
      levelObj: {}, // 当前行情卡
      mallShow: false, // 行情商城展示
    };
  },
  filters: {
    date(val) {
      return dayjs(val * 1000).format("MM-DD HH:mm");
    },
    // 纽约时间为GMT-5
    toNewYork(val) {
      return dayjs(val * 1000)
        .tz("America/Toronto")
        .format("HH:mm");
    },
  },
  mounted() {
    // this.stockInfo
    if (this.$route.name == "quotationCenter") {
      this.isSearch = true;
    }
    this.IsOpen = sessionStorage.getItem("isOpen");
    // 切换路由后可能拿不到StockData的数据，报错
    if(this.$store.state.index.StockData.symbol != "")
    this.getStockInfo(this.$store.state.index.StockData);
    this.myQuotations();
  },
  beforeDestroy() {
    if (this.setSymbolTime) {
      window.clearInterval(this.setSymbolTime); //关闭股票详情5秒定时器
      this.setSymbolTime = null;
    }
  },
  methods: {
    hideTrade() {
      this.drawer = false;
    },
    beforeClose(done) {
      done();
      $(".indivIndex").removeClass("on");
    },
    ClosePopup(msg) {
      this[msg] = false;
    },
    // 获取行情卡天数
    async myQuotations() {
      let type;
      if(this.StockData.market == "HKEX") type = "HK";
      else if(this.StockData.market == "US") type = "US";
      else type = "CN";
      const res = await get_my_quotation();
      if (res.code != 1) return this.$message.error(res.msg);
      res.data.list.forEach((e) => {
        if (e.type == type) {
          this.levelObj = e;
        }
      });
    },
    //  股票搜索历史
    async historyAdd(item) {
      var obj = {
        securityType: item.securityType,
        symbol: item.symbol,
        market: item.market,
      };
      const res = await post_history(obj);
      if (res.code != 1) return this.$message.error(res.msg);
    },
    interquotation() {
      // sessionStorage.setItem("index", 1);
      // sessionStorage.setItem("SetStochChange", 1);
      this.$store.dispatch("SetStockData", this.StockData);
      this.historyAdd(this.StockData);
      this.$store.dispatch("SetObserveStrock", {});
      this.$router.push({ path: "/quotationCenter" });
    },
    // 交易完成后重置到报价页面
    reset() {
      this.activeName = "first";
    },
    handleClick(tab, event) {
      if (tab.index == 2) {
        this.$refs.commentList.getComment();
      }
    },
    CloseRightPage() {
      this.$emit("closeClick");
    },
    TitleChange(id) {
      this.ActiveTitleList = id;
    },
    // search
    querySearch(queryString, cb) {
      var _this = this;
      get_search({ keyword: queryString }).then((res) => {
        if (res.code == 1) {
          _this.$refs.elautocomplete.activated = true;
          var results = queryString
            ? res.data.list.filter(this.createFilter(queryString))
            : res.data.list;
          // 调用 callback 返回建议列表的数据
          cb(results);
        } else {
          _this.$message.error(res.msg);
        }
      });
    },
    createFilter(queryString) {
      return (restaurant) => {
        return restaurant;
      };
    },
    handleSelect(item) {
      this.historyAdd(item);
      this.getStockInfo(item);
      this.SearchShow = false;
    },
    drawer_right(objList, type) {
      this.drawer = true;
      $(".indivIndex").addClass("on");
      this.tradeDirection = type;
    },
    // 获取股票详情
    async getStockInfo(item) {
      var obj = {
        securityType: item.securityType,
        symbol: item.symbol,
        market: item.market,
      };
      const res = await get_details(obj);
      if (res.code != 1) return this.$message.error(res.msg);
      // 如果有定时器，直接改变值
      if (this.setSymbolTime) {
        this.$nextTick(() => {
          this.$set(
            this.qutationData,
            "latestPrice",
            res.data.detail.latestPrice
          );
          this.$set(this.qutationData, "gain", res.data.detail.gain);
          this.$set(this.qutationData, "chg", res.data.detail.chg);
          this.$set(
            this.qutationData,
            "latestTime",
            res.data.detail.latestTime
          );
        });
      } else {
        this.$store.dispatch("SetStock", res.data);
      }
    },
    //  股票搜索历史
    async historyAdd(item) {
      var obj = {
        securityType: item.securityType,
        symbol: item.symbol,
        market: item.market,
      };
      const res = await post_history(obj);
      if (res.code != 1) return this.$message.error(res.msg);
    },
    // 打开行情商城
    toMarketMall(type) {
      this.mallShow = true;
      this.$refs.mall.changeMarket(type);
    },
  },
  watch: {
    StockType(val) {
      console.log(val);
    },
    StockData: {
      handler(val, old) {
        if (val !== "" && val.symbol != "") {
          if (val.securityType == 2 && this.activeName == "second") {
            this.reset();
          }
          this.myQuotations();
          this.getStockInfo(val);
        }
      },
    },
    "$store.state.index.quotationDay": {
      handler(val) {
        this.myQuotations();
      },
      deep: true
    },
    // StockData: {
    //   handler(val, old) {
    //     if(val.securityType == 2 && this.activeName == "second") {
    //       this.reset();
    //     }
    //     console.log(val,'quotationList0')
    //     this.getStockInfo(val);
    //   },
    // },
    "$store.state.wsModel.quotation": {
      handler(val, old) {
        var _this = this;
        if (val != "") {
          // _this.$forceUpdate();
          let data = JSON.parse(val);
          _this.$nextTick(() => {
            _this.$set(_this.qutationData, "latestPrice", data[4]);
            _this.$set(
              _this.qutationData,
              "gain",
              (data[4] - data[8]) / data[8]
            );
            _this.$set(_this.qutationData, "chg", data[4] - data[8]);
            _this.$set(_this.qutationData, "latestTime", data[2]);
          });
        }
      },
      deep: true,
    },
    stockInfo: {
      handler(val, old) {
        var _this = this;
        if (val != "") {
          if (_this.setSymbolTime) {
            clearInterval(_this.setSymbolTime); //关闭
            _this.setSymbolTime = null;
          }
          // _this.$forceUpdate();
          _this.$nextTick(() => {
            _this.$set(
              _this.qutationData,
              "latestPrice",
              val.detail.latestPrice
            );
            _this.$set(_this.qutationData, "gain", val.detail.gain);
            _this.$set(_this.qutationData, "chg", val.detail.chg);
            _this.$set(_this.qutationData, "latestTime", val.detail.latestTime);
          });
          if (val.detail.market == "SZSE" || val.detail.market == "SSE") {
            // 当前为沪深股且行情等级为1，5秒刷
            if (_this.level.CN.level == 1) {
              _this.setSymbolTime = setInterval(() => {
                _this.getStockInfo(val.detail);
              }, 5000);
            }
          }
        }
      },
      deep: true,
    },
  },
  computed: {
    stockInfo() {
      return this.$store.state.index.stockInfo;
    },
    StockData() {
      return this.$store.state.index.StockData;
    },
    level() {
      return this.$store.state.index.level;
    },
    accountType() {
      return this.$store.state.index.accountType;
    },
  },
};
</script>
<style lang="less">
@import "~@/assets/less/search.less";
.account-right {
  height: 100%;
  overflow: auto;
  position: relative;
  border-left: 1px solid @bgColor;
  .pb115 {
    height: 100%;
    overflow: auto;
  }
  .drawer {
    background: @deepBg;
    height: 100vh;
    .el-drawer__header {
      display: none;
    }
  }
  .account-right-top {
    padding: 10px 0;
    border-right: 1px solid @LightBorderLine;
    border-bottom: 1px solid @LightBorderLine;
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    width: 100%;
    // height: 100px;
    z-index: 10;
    box-sizing: border-box;
    background-color: @deepBg;
    h2 {
      padding: 0 20px;
      position: relative;
      font-size: 16px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      color: @fff;
      line-height: 36px;
      .title {
        display: flex;
        align-items: flex-start;
        .titleName {
          max-width: 160px;
          padding-right: 10px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
      }
      .icon {
        float: right;
        height: 18px;
        margin-top: 9px;
        cursor: pointer;
      }
    }
    .tradeTime {
      color: @fbSix;
      font-size: 12px;
      line-height: 23px;
      margin: 0 20px;
    }
    .close {
      width: 22px;
      height: 22px;
      background: url(~@/assets/img/icon_gb1.png) no-repeat center;
      background-size: 100% auto;
      cursor: pointer;
      margin-left: 8px;
      margin-top: 5px;
      &:hover {
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% auto;
        background-image: url(~@/assets/img/icon_gbl.png);
      }
    }
    .interquotation {
      cursor: pointer;
      width: 22px;
      height: 22px;
      background: url(~@/assets/img/icon_qph.png) no-repeat center;
      background-size: 100% auto;
      margin-top: 5px;
      &:hover {
        background-image: url(~@/assets/img/icon_qp.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% auto;
      }
    }
    .about-infis {
      font-size: 28px;
      color: @fff;
      line-height: 28px;
      position: relative;
      padding-left: 20px;
      padding-right: 10px;
      .hs1 {
        padding-right: 26px;
        font-weight: bold;
      }
      .smallfonts {
        font-size: 14px;
        margin-left: 8px;
      }
      .Icon {
        max-width: 100px;
        span {
          width: 20px;
          float: right;
          margin-left: 6px;
          img {
            width: 100%;
            cursor: pointer;
          }
        }
      }
      .iconDapan {
        max-width: 60px;
      }
    }
  }
  .account-trade {
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 2px solid @DarkBorderLine;
    background: @deepBg;
    width: 100%;
    z-index: 2;
    // h2 {
    //   color: @fbSix;
    //   font-size: 12px;
    //   line-height: 23px;
    //   padding: 10px 20px;
    // }
    .button {
      padding-bottom: 20px;
      padding-top: 20px;
      .fix {
        text-align: center;
        font-size: 0;
        button {
          margin: 0 2.6%;
          height: 30px;
          line-height: 30px;
          border: none;
          width: 42%;
          font-size: 12px;
          color: @fff;
          border-radius: 3px;
        }
        .bt_gray {
          color: @fbSix;
          background-color: @LightBorderLine;
          cursor: not-allowed;
        }
      }
    }
  }
  .listChange.el-tabs {
    .el-tabs__header {
      margin-bottom: 0;
      .el-tabs__item {
        font-size: 12px;
        color: @fbSix;
        padding: 0 20px;
        height: 30px;
        line-height: 30px;
      }
      .el-tabs__item.is-top:nth-child(2) {
        padding-left: 20px;
      }
      .el-tabs__item.is-active {
        color: @hoverColor;
      }
      .el-tabs__active-bar {
        background-color: @hoverColor;
        display: none;
      }
    }
    .el-tabs__nav-wrap::after {
      height: 1px;
      background: @LightBorderLine;
    }
  }
}
.account-right .search {
  position: absolute;
  top: 0;
  left: 3%;
  width: 94%;
  background: @deepBg;
  border: 1px solid @LightBorderLine;
  z-index: 5;
}
.account-right .search input[type="text"],
.account-right .search {
  .el-autocomplete {
    float: left;
    width: 90%;
    display: block;
    line-height: 36px;
    height: 36px;
    font-size: 12px;
    background: transparent;
    border: transparent;
    .el-popper {
      background: @deepBg;
      border: 1px solid @LightBorderLine;
      padding: 0;
      margin: 0;
      left: 0 !important;
      width: 357px !important;
      .el-autocomplete-suggestion__wrap {
        padding: 0;
      }
      li {
        padding: 6px 20px;
        box-sizing: border-box;
        border-bottom: 1px solid @LightBorderLine;
        .name {
          font-size: 16px;
          color: @fff;
          line-height: 26px;
        }
        .about-infis {
          font-size: 24px;
          color: @fff;
          line-height: 28px;
          position: relative;
          padding: 0;
          .hs1 {
            padding-right: 26px;
          }
          .smallfonts {
            font-size: 12px;
            margin-left: 6px;
          }
        }
      }
      li:hover,
      li.highlighted {
        background: @borderColor;
      }
      .popper__arrow {
        border-bottom-color: @deepBg;
      }
      .popper__arrow::after {
        border-bottom-color: @deepBg;
        display: none;
      }
    }
    input {
      color: @fff;
      border: none;
      background: none;
      font-size: 12px;
      height: 36px;
      line-height: 36px;
    }
  }
}
.account-right .search input[type="text"]::-webkit-input-placeholder {
  /* WebKit browsers */
  color: @fff;
  font-size: 12px;
}
.account-right .search input[type="text"]::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: @fff;
  font-size: 12px;
}
.account-right .search input[type="text"]:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: @fff;
  font-size: 12px;
}
.account-right .search input[type="button"] {
  width: 10%;
  float: right;
  display: block;
  height: 36px;
  background: url(~@/assets/img/icon_gh.png) no-repeat center;
  background-size: 18px;
  border: none;
}
.tip_i {
  .blue_i {
    color: @hoverColor;
    cursor: pointer;
  }
}
.el-tooltip__popper.is-dark {
  background-color: @bgColor;
  color: @fbSix;
}
</style>